<template>
    <div>
        <el-row>
            <el-col :span="12"><div id="memberMain" style="width: 600px;height:400px;"></div></el-col>
            <el-col :span="12"><div id="courseMain" style="width: 600px;height:400px;"></div></el-col>
        </el-row>
        <el-row>
            <el-col :span="12"><div id="orderMain" style="width: 600px;height:650px;"></div></el-col>
            <el-col :span="12"><div id="revenueShareMain" style="width: 600px;height:650px;"></div></el-col>
        </el-row>

    </div>
</template>

<script>
    export default {
        name: "tj1",
        data() {
            return {
                //用户统计统计图的数据
                memberData:[],
                //课程类型统计图的数据
                courseData:[],
                //课程销售量的统计图的数据
                orderDate:[],
                token:null,
                isOrderMain:false,
                XData:[],
                YData:[],
            };
        },
        created() {
            this.token = sessionStorage.getItem("token");
            console.log("2")
        },
        methods: {
            //用户类型饼图
            drawMenberChart() {
                //基于准备好的dom，初始化echarts实例
                var myChart = this.$echarts.init(document.getElementById('memberMain'));

                //发送请求获取数据
                this.$axios.get(`/core/User/getMemberNum`,{headers: {'token': this.token}}).then((result)=>{
                    if (result.data.code===2000){
                        this.memberData=result.data.result;
                        // 绘制图表
                        myChart.setOption({
                            title: {
                                text: '用户统计',
                                subtext: '普通用户和教师的统计',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b} : {c} ({d}%)'
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    mark: {show: true},
                                    dataView: {show: true, readOnly: false},
                                    restore: {show: true},
                                    saveAsImage: {show: true}
                                }
                            },
                            series: [
                                {
                                    name: '用户类型',
                                    type: 'pie',
                                    radius: '50%',
                                    data: this.memberData,
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]

                        });
                    }
                })

            },
            //课程类型饼图
            drawCourseChart(   ) {
                //基于准备好的dom，初始化echarts实例
                var myChart = this.$echarts.init(document.getElementById('courseMain'));

                //发送请求获取数据
                this.$axios.get(`/core/type/findCourseTypeNum`,{headers: {'token': this.token}}).then((result)=>{
                    if (result.data.code===2000){
                        this.courseData=result.data.result;
                        // 绘制图表
                        myChart.setOption({
                            title: {
                                text: '课程统计',
                                subtext: '课程的数量',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b} : {c} ({d}%)'
                            },
                            legend: {
                                top: 'bottom'
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    mark: {show: true},
                                    dataView: {show: true, readOnly: false},
                                    restore: {show: true},
                                    saveAsImage: {show: true}
                                }
                            },
                            series: [
                                {
                                    name: '课程类型',
                                    type: 'pie',
                                    radius: [20, 100],
                                    center: ['50%', '50%'],
                                    roseType: 'area',
                                    itemStyle: {
                                        borderRadius: 8
                                    },
                                    data: this.courseData
                                }
                            ]

                        });
                    }
                })
            },

            //课程销售额
            drawOrderChart() {
                var that=this;
                //基于准备好的dom，初始化echarts实例
                var
                    myChart = this.$echarts.init(document.getElementById('orderMain'));
                var option;
                //发送请求获取数据
                this.$axios.get(`/core/order/gettitleandfee`,{headers: {'token': this.token}}).then((result)=>{
                    console.log(result);
                    if (result.data.code==2000){
                        that.orderDate=result.data.result;
                        that.XData = result.data.result.names;
                        that.YData = result.data.result.prices;
                        setTimeout(function () {
                            var newData = [];
                            for (var i = 0; i < that.orderDate.length; i++) {
                                newData.push({type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}});
                            }
                            newData.push({
                                type: 'pie',
                                id: 'pie',
                                radius: '30%',
                                center: ['50%', '25%'],
                                emphasis: {focus: 'data'},
                                label: {
                                    formatter: '{b}: {@2012} ({d}%)'
                                },
                                encode: {
                                    itemName: 'product',
                                    value: '2012',
                                    tooltip: '2012'
                                }
                            });

                            option = {
                                legend: {
                                    top: 'bottom',
                                },
                                title: {
                                    text: '课程年销售额',
                                    subtext: '课程的销售额',
                                    left: 'center'
                                },
                                tooltip: {
                                    trigger: 'axis',
                                    showContent: false
                                },
                                dataset: {
                                    source: that.orderDate
                                },
                                xAxis: {
                                    type: 'category',
                                    data:that.XData,
                                },
                                yAxis: {
                                    gridIndex: 0,
                                    data:that.YData,
                                },
                                grid: {top: '55%'},
                                series: newData
                            };

                            myChart.on('updateAxisPointer', function (event) {
                                var xAxisInfo = event.axesInfo[0];
                                if (xAxisInfo) {
                                    var dimension = xAxisInfo.value + 1;
                                    myChart.setOption({
                                        series: {
                                            id: 'pie',
                                            label: {
                                                formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                                            },
                                            encode: {
                                                value: dimension,
                                                tooltip: dimension
                                            }
                                        }
                                    });
                                }
                            });
                            myChart.setOption(option);
                        });
                    }
                })
            },
            //收入分成
            drawRevenueShareChart() {
                //基于准备好的dom，初始化echarts实例
                var myChart = this.$echarts.init(document.getElementById('revenueShareMain'));

                //发送请求获取数据

                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '堆叠区域图',
                        subtext: '课程的销售额',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
                        top: 'bottom'
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '邮件营销',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: '联盟广告',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name: '视频广告',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: [150, 232, 201, 154, 190, 330, 410]
                        },
                        {
                            name: '直接访问',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: [320, 332, 301, 334, 390, 330, 320]
                        },
                        {
                            name: '搜索引擎',
                            type: 'line',
                            stack: '总量',
                            label: {
                                show: true,
                                position: 'top'
                            },
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: [820, 932, 901, 934, 1290, 1330, 1320]
                        }
                    ]
                });
            }

        },
        mounted() {

            this.drawMenberChart();
            this.drawCourseChart();
            this.drawOrderChart();
            // this.drawRevenueShareChart();
        },
    }
</script>

<style scoped>

</style>